<template>
	<view class="my_team">
		<view class="income_header">
			<view class="item" :class="active==1?'active':''" @click="change(1)">我的团队</view>
			<view class="item" :class="active==2?'active':''" @click="change(2)">我投资的人</view>
		</view>
		<component :is="currentComponent" />
	</view>
</template>

<script setup>
	import TeamOne from "@/components/my/TeamOne.vue";
	import TeamTwo from "@/components/my/TeamTwo.vue";
	import {
		ref,
		shallowRef
	} from "vue";

	const currentComponent = shallowRef(TeamOne);
	const active = ref(1);
	const change = (value) => {
		active.value = value;
		if (value == 1) {
			currentComponent.value = TeamOne;
		}
		if (value == 2) {
			currentComponent.value = TeamTwo;
		}
	};
</script>

<style scoped lang="scss">
	.my_team {
		.income_header {
			padding: 40rpx 0 30rpx;
			box-sizing: border-box;
			display: flex;

			.item {
				width: 200rpx;
				height: 60rpx;
				color: #666666;
				font-size: 26rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				border: 2px solid #CCCCCC;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;

				&.active {
					color: #CA1C1D;
					font-size: 26rpx;
					border: 2px solid #CA1C1D;
					box-sizing: border-box;
				}
			}
		}

		:deep() {
			.head {
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.cell {
					width: 125rpx;
					color: #666666;
					font-size: 24rpx;

					&:last-child {
						text-align: right;
					}
				}

				.name {
					flex: 1;
					color: #666666;
					font-size: 24rpx;
				}
			}

			.scroll_view {
				height: calc(100vh - var(--window-top) - var(--window-bottom) - #{$navBarHeight} - 330rpx);

				.list {
					border-radius: 20rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					overflow: hidden;

					.item {
						border-bottom: 1px solid #EEEEEE;
						padding: 20rpx 0;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;

						&:last-child {
							border: none;
						}

						.avatar {
							width: 95rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;

							image {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50rpx;
							}

							view {
								color: #333333;
								font-size: 24rpx;
								font-weight: 400;
								margin-top: 10rpx;
							}
						}

						.item_view {
							height: 80rpx;
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.phone {
								color: #333333;
								font-size: 28rpx;
								font-weight: bold;
							}

							.time {
								color: #999999;
								font-size: 24rpx;
								font-weight: 400;
							}
						}

						.status {
							text-align: right;
							color: #333333;
							font-size: 28rpx;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>